<template>
    <view class="page">
        <!--<view class="title">-->
            <!--<text>居住房屋租赁合同</text>-->
        <!--</view>-->
        <!--<view class="content">-->
            <!--<view>-->
                <!--<text style="font-weight: 500">甲方(出租人)：</text> <text> 田盼盼 </text>-->
            <!--</view>-->
            <!--<view>-->
                <!--<text style="font-weight: 500">乙方(承租人)：</text> <text> 潘伟东 </text>-->
            <!--</view>-->
            <!--<view>-->
                <!--<text v-for="(item,index) in 10"> 描述文字：根据奥术大师大阿斯达 </text>-->
            <!--</view>-->

            <!--<view>-->
                <!--<view class="subtitle">-->
                    <!--<text>租金及支付方式</text>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
                <!--<view>-->
                    <!--<text v-for="(item,index) in 3"> 描述文字：根据奥术大师大阿斯达 </text>-->
                <!--</view>-->
            <!--</view>-->

            <!--<view>-->
                <!--<view class="subtitle">-->
                    <!--<text>租客身份信息</text>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
                <!--<view class="info">-->
                    <!--<view><text>租金起止日期</text></view>-->
                    <!--<view><text> : </text><text>2022-01-01 至 2023-02-18</text></view>-->
                <!--</view>-->
            <!--</view>-->

        <!--</view>-->

        <view class="content">
            <u-parse :content="content"></u-parse>


            <u-gap height="70"></u-gap>
            <view class="safe-area-inset-bottom"></view>
        </view>

        <view class="he-settlement" v-if="parseInt(is_confirm)===0">
            <view class="footer">
                <view class="info2">
                    <view style="display: flex;align-items: center" @click.stop="select">
                        <he-radio :is-change="false" v-model="all"></he-radio>
                    </view>
                    <view style="margin-left: 10rpx">
                        <text class="he-select__all">同意</text>
                        <view>
                            <text style="font-size: 14px; color: #f56c6c;font-weight: bold">《房满租电子合同服务条款》</text>
                        </view>
                    </view>
                </view>
                <view style="width: 220rpx">
                    <u-button type="warning" text="确认签署" @click="sign"></u-button>

                    <cat-signature canvasId="canvas1" @close="closeSign" @save="saveSign" :visible="showSign"></cat-signature>
                </view>
            </view>
            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    import heRadio from "../../../components/he-radio.vue";
    import catSignature from "../../../components/cat-signature.vue";

    export default {
        name: "confirm",
        components:{
            heRadio,
            catSignature
        },
        onLoad(option) {
            let params = {
                u_id: uni.getStorageSync('u_id'),
                up_id: option.id
            };
            this.up_id = option.id;
            this.is_confirm = option.is_confirm;
            uni.showLoading({title: '正在加载'});
            uni.$u.http.get('/api.php/UserClinet/user_contract' + uni.$u.queryParams(params),).then(res => {
                uni.hideLoading();
                this.content = res;
            });
        },
        data(){
            return{
                all: false,
                showSign: false,
                signature: '',
                up_id: '',
                content: '',
                is_confirm: ''
            }
        },
        methods:{
            openSign(){
                this.showSign = true;
            },
            closeSign(){
                this.showSign = false;
            },

            // 异步上传签名
            // async saveSign(val){
            //     this.showSign = false;
            //     uni.showLoading({title: '正在上传'});
            //     this.signature = await this.uploadFilePromise(val);
            //     uni.hideLoading();
            // },

            // 同步阻塞上传签名
            saveSign(val){
                this.showSign = false;
                uni.showLoading({title: '正在上传'});
                let server = this.$url + '/api.php/index/file_update';
                let that = this;
                uni.uploadFile({
                    url: server,
                    filePath: val,
                    name: 'image[]',
                    success: (res) => {
                        let resp = JSON.parse(res.data);
                        that.signature = resp.data.img_url[0];
                    }
                });
                uni.hideLoading();
            },
            // uploadFilePromise(url) {
            //     let server = this.$url + '/api.php/index/file_update';
            //     return new Promise((resolve, reject) => {
            //         uni.uploadFile({
            //             url: server,
            //             filePath: url,
            //             name: 'image[]',
            //             success: (res) => {
            //                 let resp = JSON.parse(res.data);
            //                 setTimeout(() => {
            //                     resolve(resp.data.img_url[0]);
            //                 }, 1000)
            //             }
            //         });
            //     })
            // },
            select(){
                this.all = !this.all;
            },
            sign(){
                if (this.all) {
                    if (this.signature === '') {
                        this.openSign();
                        return;
                    }

                    let data = {
                        u_id: uni.getStorageSync('u_id'),
                        up_id: this.up_id,
                        signature: this.signature,
                    };

                    uni.showLoading({title: '正在加载'});
                    uni.$u.http.post('/api.php/UserClinet/confirm_contract', data).then(res => {
                        uni.hideLoading();

                        uni.showToast({
                            title: '签约成功', //提示文字
                            duration: 1500, //显示时长
                            icon: "success", //图标，支持"success"、"loading"
                            success:function () {
                                uni.navigateBack({delta: 1});
                            }
                        });
                    });
                }else{
                    uni.showToast({
                        title: '阅读并勾选协议', //提示文字
                        duration: 1500, //显示时长
                        icon: "error", //图标，支持"success"、"loading"
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);

    }
    .content{
        padding: 20rpx;

        text{
            font-size: 12px;
        }
    }

    .title{
        font-size: 42rpx;
        font-weight: 600;
        text-align: center;
        padding: 40rpx 0 20rpx 0;
    }

    .subtitle{
        margin: 20rpx 10rpx;
        text{
            font-size: 32rpx;
            font-weight: 600;
        }
    }
    .info{
        @include flex();

        view:first-child{
            flex: 4;
        }
        view:last-child{
            flex: 6;
            text:nth-child(1){
                font-weight: 600;
                padding: 0 10rpx;
            }
        }
    }

    .he-settlement {
        position: fixed;
        bottom: var(--window-bottom);
        width: 100%;
        min-height: 96px;
        background: #FFFFFF;
        z-index: 2;
        border-top: 1rpx solid #c0c4cc;
    }
    .he-select__all {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
        margin-left: 16rpx;
    }

    .footer{
        @include flex(row);
        justify-content: space-between;
        padding: 20rpx 20rpx 0 20rpx;
    }

    .info2{
        @include flex(row);
        justify-content: flex-start;
        align-items: center;
        flex: 9;
        margin-right: 20rpx;
    }
    .cbox{
        @include flex(column);
    }
</style>
